<template>
	<view class="content">
		<view class="table">
			<view class="flex-row th">
				<view class="flex-1">
					设备参数
				</view>
				<view class="flex-1">
					当前数值
				</view>
				<view class="flex-1">
					正常范围
				</view>
				<view class="flex-2">
					时间
				</view>
			</view>
			<template v-for="item in list">
				<view class="flex-row td">
					<view class="flex-1">
						{{item.title}}
					</view>
					<view class="flex-1">
						{{item.value}}
					</view>
					<view class="flex-1">
						{{item.min + '~' + item.max}}
					</view>
					<view class="flex-2">
						{{item.createTime}}
					</view>
				</view>
			</template>
			<view class="flex-row td" v-if="!list.length">
				<view class="flex-1">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				list: []
			};
		},
		onLoad(e) {
			this.id = e.id
			uni.setNavigationBarTitle({
				title: e.name
			})
			this.getData()
		},
		methods: {
			getData(){
				this.$api.get('api/mobile/getDeviceData',{id: this.id}).then(res => {
					this.list = res.result
				})
			},
		}
	}
</script>

<style lang="scss">
.content{
	padding: 20rpx 10rpx;
	.table{
		display: flex;
		flex-direction: column;
		font-size: $uni-font-size-28;
		.th{
			align-items: center;
			background-color: #efefef;
		}
		.td{
			align-items: center;
			border-bottom: 1rpx solid #efefef;
		}
		.flex-1{
			padding: 20rpx 8rpx;
			text-align: center;
			flex: 1;
		}
		.flex-2{
			padding: 20rpx 8rpx;
			text-align: center;
			flex: 2;
		}
		.blue{
			color: #0026ff;
		}
	}
}
</style>
